<template>
  <transition name="page"
              mode="out-in"
              @before-enter="beforeEnter"
              @enter="enter"
              @leave="leave">
    <slot></slot>
  </transition>
</template>

<script setup>
import gsap from 'gsap';

const beforeEnter = (el) => {
  gsap.set(el, {
    opacity: 0,
    y: 50,
  });
};

const enter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.6,
    ease: 'power2.out',
    onComplete: done
  });
};

const leave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    y: -50,
    duration: 0.6,
    ease: 'power2.in',
    onComplete: done
  });
};
</script>

<style scoped>
.page-enter-active,
.page-leave-active {
  position: absolute;
  width: 100%;
}
</style> 